import React from 'react';
import './Message.less';
import Layout, {Left, Right} from "uxcore-layout";
import Table from 'uxcore-table';
import Button from 'uxcore-button';
import Switch from 'uxcore-switch';
import Icon from 'uxcore-icon';
import SockJS from 'sockjs-client';
import webstomp from 'webstomp-client';
import {apiUrlPrefixProd} from './../../../app/variables';

export default class Message extends React.Component {
  constructor(props) {
    super(props);
    this.map = props.__map__;

    this.wsConnect = this.wsConnect.bind(this);
    this.wsDisConnect = this.wsDisConnect.bind(this);
    this.updateYcsj = this.updateYcsj.bind(this);
    this.receiveJdMessage = this.receiveJdMessage.bind(this);
    this.showMessageHistory = this.showMessageHistory.bind(this);

    this.state = {
      stompClient: webstomp.over(new SockJS(apiUrlPrefixProd + 'ws'), {debug: false}),
    };
  }

  componentWillMount() {
    if (this.props.location.pathname === '/xxls') {
      this.props.onXxlsShowOrHide(true);
    } else {
      this.props.onXxlsShowOrHide(false);
    }
    this.wsDisConnect();
  }

  componentWillUnmount() {
  }

  componentDidMount() {
    this.wsConnect();
  }

  // 更新扬尘实时PM10数据
  updateYcsj(data) {
    this.props.onUpdateYcsj(data);
  }

  // 接收监督业务消息
  receiveJdMessage(message) {
    this.props.receiveJdMessage(message);
  }

  // 接受到扬尘预警消息
  handleYcAlertMessage(message) {
    this.props.handleYcAlertMessage(message);
  }

  wsConnect() {
    let t = this;
    if (!t.state.stompClient.connected) {
      t.state.stompClient.connect(
        {Authorization: this.props.token},
        (frame) => {
          if (frame.command === 'CONNECTED') {
            t.state.stompClient.subscribe('/topic/jdmessage', function (response) {
              t.receiveJdMessage(JSON.parse(response.body));
            });
            t.state.stompClient.subscribe('/topic/ycsj', function (response) {
              t.updateYcsj(JSON.parse(response.body));
            });
            t.state.stompClient.subscribe('/topic/ycAlertMessage', function (response) {
              t.handleYcAlertMessage(JSON.parse(response.body));
            });
          } else {
          }
        },
        () => {
        }
      );
    }
  }

  wsDisConnect() {
    if (this.state.stompClient && this.state.stompClient.connected) {
      this.state.stompClient.disconnect();
    }
  }

  handleClick(message) {
    this.props.onMessageClick(message);
  }

  showMessageHistory(showOrHide) {
    if (showOrHide) {
      this.context.router.push('/xxls');
    } else {
      this.context.router.go(-1);
    }
    this.props.onXxlsShowOrHide(showOrHide);
  }

  render() {

    let t = this;
    let content = this.props.content;
    let _title = content.title;
    let _messages = content.messages;
    let data = [];

    const messageColumns = [
      {dataKey: 'num', title: '序号', width: '5%', ordered: false},
      {
        dataKey: 'xxlx', title: '消息类型', width: '15%', ordered: false,
      },
      {
        dataKey: 'txms', title: '消息内容', width: '60%', ordered: false,
        render: function (cellData, rowData) {
          return (
            <div onClick={() => {t.handleClick(rowData);}}>
              <span style={{color: '#1b94f1', cursor: 'pointer'}}>{rowData.txms}</span>
            </div>
          )
        }
      },
      {dataKey: 'jssj', title: '接收时间', width: '20%', ordered: false},
    ];

    if (_messages) {
      _messages.map((message, i) => {
        let xxlx;
        switch (message.type) {
          case "YA":
            xxlx = "扬尘黄色预警";
            break;
          case "RA":
            xxlx = "扬尘红色预警";
            break;
          case "JD":
            xxlx = message.msglx;
            break;
          default:
            xxlx = "未知";
            break;
        }
        data.push({
          ...message,
          "num": i + 1,
          "xxlx": xxlx,
          "txms": `${message.glName}>>>${message.txms}`,
          'position': {
            longitude: message.longitude,
            latitude: message.latitude
          },
          "className": message.className,
        })
      });
    }

    const messageProps = {
      showHeader: true,
      height: this.props.height - 35,
      size: 'small',
      className: 'kuma-uxtable-split-line',
      // showColumnPicker: false,
      showPager: false,
      jsxdata: {
        "data": data,
      },
      jsxcolumns: messageColumns,
    };

    return (
      <div className="custom-layer-message" style={{height: this.props.height}}>
        <div className="title title_5">
          <Layout className="message-title-layout">
            <Left>
              <Icon name="xiaoxitixingfull"/>
              {_title}
            </Left>
          </Layout>
        </div>
        <Table {...messageProps} ref="messageBox"/>
      </div>
    );
  }
}

/*
            <Right width={90}>
              <Switch
                checked={this.props.xxlsOpts.visible}
                checkedChildren="显示"
                unCheckedChildren="隐藏"
                onChange={() => {
                  this.showMessageHistory(!this.props.xxlsOpts.visible);
                }}
              />
            </Right>

 */

Message.contextTypes = {
  router: React.PropTypes.isRequired
};
